<template>
    <div class="main">
        <audio :src="props.config.src" controls class="audio" ref="audio" @timeupdate="setOffset"></audio>
        <div class="container" ref="container">
            <ul ref="ul">
                <li v-for="(item, index) in  lrcData "
                    :class="{ 'active': (index === nowId) }" :key="index">
                    {{ item.words }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, getCurrentInstance } from 'vue'
import { parseLrc } from '../../utils/index'
defineOptions({ name: "LyricBasic" })
const props = defineProps({ config: Object })

if (!props.config.src) {
    throw new Error('请设置src参数（音乐源）');
}
if (!props.config.lyrStr) {
    throw new Error('请设置lyrStr参数（歌词文本）');
}


// 歌词str-->obj
const lrcData = reactive(parseLrc(props.config.lyrStr))

const nowId = ref(-1) // 当前的歌词

// 获取页面的实例对象
const pageInstance = getCurrentInstance()
var liHeight
var halfUlHeight
var offsetMax

const findIndex = () => {
    const curTime = pageInstance.refs.audio.currentTime;
    for (var i = 0; i < lrcData.length; i++) {
        if (curTime < lrcData[i].time) {
            return i - 1
        }
    }
    //找遍了都没找到，说明播放到最后一句
    return lrcData.length - 1;
}

const initSize = () => {
    // 初始化尺寸
    var containerHeight = pageInstance.refs.container.clientHeight
    liHeight = pageInstance.refs.ul.children[0].clientHeight
    halfUlHeight = containerHeight / 2
    offsetMax = pageInstance.refs.ul.clientHeight - containerHeight
    // 初始化速率参数
    // 设置歌词自动滚动速度
    if (props.config.scorllSpeed && typeof props.config.scorllSpeed === 'number') {
        pageInstance.refs.ul.style.transition = `${props.config.scorllSpeed}s all linear`
    }
    // 设置歌词缩放速度
    if (props.config.scaleSpeed && typeof props.config.scaleSpeed === 'number') {
        document.body.style.setProperty('--lyricScaleSpeed', props.config.scaleSpeed + 's');
    } else {
        document.body.style.setProperty('--lyricScaleSpeed', '0.3s');
    }
    // 设置歌词缩放比例
    if (props.config.scalePercent && typeof props.config.scalePercent === 'number') {
        document.body.style.setProperty('--lyricScalePercent', props.config.scalePercent);
    } else {
        document.body.style.setProperty('--lyricScalePercent', 1.2);
    }
}

onMounted(() => {
    initSize()
})

const setOffset = () => {
    nowId.value = findIndex()
    var offset = nowId.value * liHeight + liHeight / 2 - halfUlHeight
    if (offset < 0) {
        offset = 0
    }
    if (offset > offsetMax) {
        offset = offsetMax
    }
    pageInstance.refs.ul.style.transform = `translateY(-${offset}px)`
}




</script>

<style scoped>
.main {
    text-align: center;
    width: 100%;
    height: 100%;
}

.audio {
    width: 450px;
    height: 30px;
}

.container {
    height: 500px;
    overflow: hidden;
    background: #000;
}

.container ul {
    transition: .6s all linear;
}

.container li {
    height: 30px;
    line-height: 30px;
    transition: var(--lyricScaleSpeed) all linear;
    list-style-type: none;
    color: #666;
}

.container .active {
    color: #fff;
    transform: scale(var(--lyricScalePercent));
}
</style>
